import * as React from 'react';
import * as data from './data';

interface SimulatorDisplayProps {
    children?: React.ReactElement<HTMLDivElement>;
    scale?: number;
}

export class SimulatorDisplay extends data.Component<SimulatorDisplayProps, {}> {

    protected scalePixel(num: number, noPx?: true) {
        const { scale } = this.props;
        return `${num * scale}${!noPx && 'px'}`;
    }

    /**
     * Each svg is transform scaled based on a passed down scale prop.
     * Eeach relevant top and left attribute is scaled using the same scale.
     * Width and height pixels are scaled if not transformed by the initial scale.
     */
    renderCore() {
        const { children, scale } = this.props;

        const dPad = <svg height="127.2" width="127.2" style={{ transform: `scale(${scale})`, transformOrigin: `0 0`, position: 'absolute', left: '0px', top: this.scalePixel(297.85) }} visibility="visible"><g transform="translate(18.80933368822642 18.80933368822642) scale(3.7618667376452843)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.813 24.362" width="23.813" height="24.362"><path fill="#f290c1" d="M11.906 0c-2.431 0-3.304.092-3.59.378-.29.29-.378 1.21-.378 3.969v3.591h-3.59c-2.76 0-3.68.087-3.97.378C.092 8.602 0 9.474 0 11.9c0 3.051.032 3.237.65 3.855.62.62.797.65 3.968.65h3.32v3.583c0 2.49.1 3.697.33 3.958.48.544 6.688.56 7.23.018.29-.29.377-1.21.377-3.968v-3.591h3.32c3.171 0 3.348-.03 3.969-.65.618-.618.649-.804.649-3.855 0-2.426-.092-3.298-.378-3.584-.288-.288-1.174-.378-3.704-.378h-3.327V4.763c0-1.94-.103-3.175-.264-3.175-.146 0-.265-.187-.265-.416 0-.98-.65-1.172-3.969-1.172z"></path><path fill="#f291bd" d="M11.906 0c-2.431 0-3.304.092-3.59.378-.29.29-.378 1.21-.378 3.969v3.591h-3.59c-2.76 0-3.68.087-3.97.378C.092 8.602 0 9.474 0 11.9c0 3.051.032 3.237.65 3.855.62.62.797.65 3.968.65h3.32v3.583c0 2.49.1 3.697.33 3.958.48.544 6.688.56 7.23.018.29-.29.377-1.21.377-3.968v-3.591h3.241c3.027-.001 3.29-.042 3.97-.627.719-.619.727-.66.727-3.855 0-2.446-.092-3.321-.378-3.607-.288-.288-1.174-.378-3.704-.378h-3.327V4.763c0-1.94-.103-3.175-.264-3.175-.146 0-.265-.187-.265-.416 0-.98-.65-1.172-3.969-1.172zm1.799.534c.188-.002.635.288.992.645.626.626.649.781.649 4.234 0 2.368-.096 3.583-.283 3.583-.19 0-.263-1.135-.222-3.438.058-3.3.035-3.46-.552-3.969-.336-.292-.504-.532-.372-.534.131-.002.06-.12-.159-.26-.283-.184-.298-.258-.053-.261zm-4.488.525c.12 0 .22.178.22.397 0 .45-.019.466-.264.22-.247-.246-.22-.617.044-.617zm-.561 6.398c.044-.018.099.08.19.283.114.254.138.641.054.86-.169.44-.962.549-.962.132 0-.146.11-.265.246-.265s.293-.268.35-.595c.046-.261.078-.396.122-.415zM22.4 8.997c.24 0 .883.755.883 1.039 0 .387-.45.357-.704-.048-.25-.399-.356-.992-.18-.992zM.936 9.63c.027-.006.051 0 .071.02.082.081 0 .295-.18.474-.261.26-.292.23-.148-.148.074-.196.176-.327.257-.346zm21.876 2.83c.038-.01.107.097.234.315.151.26.234.595.185.745-.142.424-.477-.054-.468-.666.003-.254.01-.383.049-.394zm-22.071.88a.16.16 0 0 1 .053.02c.145.09.264.336.264.546 0 .21-.119.381-.264.381-.146 0-.265-.245-.265-.545 0-.262.091-.426.212-.403zm3.214 1.5c1.97-.026 4.558.11 4.762.355.137.166.27 1.781.296 3.59.03 2.222-.05 3.319-.25 3.385-.208.07-.296-.931-.296-3.363v-3.462H5.012c-2.294 0-3.4-.09-3.288-.271.089-.144 1.049-.218 2.231-.234zm5.258 7.66c.128.001.393.127.725.378.387.292.416.387.116.386-.218 0-.55-.176-.738-.388-.22-.25-.23-.375-.103-.375z"></path><path fill="#a3809c" d="M12.012 0C7.81 0 7.938-.139 7.938 4.407v3.531H4.453c-4.58 0-4.453-.113-4.452 3.943 0 2.844.045 3.122.625 3.796.622.723.65.728 3.97.728h3.342v3.609c0 3.126.062 3.655.463 3.96.318.241 1.374.354 3.38.36 4.184.012 4.094.108 4.094-4.372v-3.557h3.271c3.182 0 3.29-.02 3.969-.698.675-.675.697-.798.69-3.77-.006-2.135-.116-3.214-.36-3.536-.302-.398-.821-.463-3.696-.463h-3.345V4.763c0-1.94-.103-3.175-.264-3.175-.146 0-.265-.187-.265-.416C15.875.199 15.22 0 12.012 0zm-.106.53c1.92 0 2.208.067 2.79.65.621.62.65.797.65 3.968v3.32h3.32c3.171 0 3.348.028 3.968.649.575.574.65.879.65 2.646 0 1.154-.112 1.996-.265 1.996-.15 0-.265-.75-.265-1.718 0-1.386-.111-1.846-.576-2.381-.56-.644-.678-.664-3.97-.664h-3.391V5.677c0-3.171-.029-3.348-.65-3.969-.547-.547-.902-.65-2.26-.65-1.359 0-1.714.103-2.261.65-.62.62-.65.798-.65 3.97v3.318h-3.32c-3.17 0-3.347.03-3.968.65-.568.568-.65.886-.65 2.532 0 1.28.122 2.005.379 2.261.29.29 1.21.378 3.969.378h3.59v3.394c0 3.205.034 3.425.612 3.968.45.422.944.576 1.852.576.682 0 1.24.119 1.24.264 0 .148-.673.258-1.521.249-1.253-.014-1.627-.129-2.117-.652-.552-.59-.595-.878-.595-3.953v-3.317h-3.32c-3.17 0-3.348-.029-3.968-.65-.579-.578-.65-.874-.65-2.711.001-1.787.084-2.16.627-2.79.62-.723.65-.728 3.968-.728h3.343V5.148c0-3.171.029-3.348.65-3.969.582-.582.87-.65 2.79-.65zM9.782 11.668c.154.024.358.267.56.723.182.412.668.898 1.08 1.08.412.183.749.441.749.575 0 .133-.281.242-.625.242-.807 0-2.02-1.214-2.02-2.02 0-.426.102-.623.256-.6z"></path><path fill="#a8769a" d="M12.06 0C7.84 0 7.939-.105 7.939 4.425v3.513H4.5c-4.598 0-4.5-.086-4.5 3.991 0 2.976.023 3.104.697 3.778.678.678.787.698 3.969.698h3.27v3.485c0 2.87.078 3.57.439 3.968.374.413.865.484 3.356.484 2.633 0 2.978-.057 3.53-.576.58-.543.613-.763.613-3.968v-3.394l3.241-.008c4.438-.011 4.697-.266 4.697-4.618 0-3.822-.02-3.84-4.234-3.84h-3.175V4.763c0-1.94-.103-3.175-.264-3.175-.146 0-.265-.187-.265-.416 0-.97-.657-1.172-3.814-1.172zm-.154.53c1.92 0 2.208.067 2.79.65.621.62.65.797.65 3.968v3.32h3.32c3.171 0 3.348.028 3.968.649.575.574.65.879.65 2.646 0 1.737-.062 1.996-.471 1.996-.26 0-.643.238-.852.529-.348.482-.685.53-3.763.53h-3.381l-.034 1.653c-.018.91-.04 2.424-.047 3.366-.011 1.42-.117 1.817-.616 2.316-.33.33-.786.602-1.01.602-.225 0-.41.119-.41.264 0 .148-.673.258-1.521.249-1.253-.014-1.627-.129-2.117-.652-.552-.59-.595-.878-.595-3.953v-3.317h-3.32c-3.17 0-3.348-.029-3.968-.65-.583-.582-.65-.87-.65-2.79s.067-2.207.65-2.79c.62-.62.797-.649 3.969-.649h3.319V5.148c0-3.171.029-3.348.65-3.969.582-.582.87-.65 2.79-.65zm0 2.116c-.617 0-.793.117-.793.529 0 .291-.12.53-.265.53-.145 0-.265.237-.265.528 0 .291-.119.53-.264.53-.146 0-.265.238-.265.529 0 .29-.119.529-.264.529-.146 0-.28.208-.3.463-.019.254-.127.046-.24-.463l-.206-.926.042.926.042.926 2.646.147c1.455.081 2.735.17 2.844.199.251.064.26-1.072.013-1.714-.167-.433-.202-.419-.331.13-.128.541-.232.448-.877-.794-.402-.774-.73-1.557-.727-1.738.002-.192-.329-.331-.79-.331zm9.525 6.35c-.013.013.067.12.231.33.346.441.563.582.563.364 0-.055-.208-.264-.463-.463-.21-.165-.317-.245-.33-.231zm-14.874.021c-.772-.016-.951.065-.831.377.111.29-.285.596-1.455 1.125-1.343.607-1.608.834-1.609 1.387-.001.56.264.78 1.722 1.432 1.728.772 1.875 1.067.643 1.288-.364.065.35.115 1.588.11 1.237-.005 1.802-.055 1.257-.112l-.993-.104v-2.608c0-1.838.098-2.647.331-2.741.182-.073-.112-.143-.653-.154zm5.365.464c-.676.022-1.35.282-1.77.772-.651.756-.817 1.389-.364 1.389.144 0 .41-.238.592-.53.426-.68 1.271-.673 2.152.02.85.668.931 1.812.168 2.362-.29.21-.529.474-.529.587 0 .383.718.21 1.42-.342.93-.732.996-2.67.121-3.602-.434-.462-1.113-.678-1.79-.656zm5.23.044c-.229 0-.313 4.58-.089 4.804.071.071 1.017-.296 2.1-.816 1.73-.83 1.973-1.034 1.987-1.673.01-.4-.1-.728-.244-.728-.143 0-.997-.357-1.898-.793-.901-.437-1.737-.794-1.856-.794zm-15.98 3.386c-.034.018-.058.178-.062.45-.005.437.05.648.122.469.073-.18.077-.537.01-.794-.025-.097-.05-.136-.07-.125zm1.704 1.673a2.998 2.998 0 0 0-.558.046c-.329.063-.122.117.46.12.582.003.852-.049.599-.115a2.182 2.182 0 0 0-.501-.05zm10.134 2.282c-.297.002-.625.008-.97.02-1.538.051-2.515.193-2.515.364 0 .154.387 1.092.86 2.084.721 1.513.967 1.804 1.521 1.81.568.004.793-.279 1.588-2.005.51-1.105.956-2.083.993-2.174.028-.067-.585-.104-1.477-.099zm-3.946 4.427a.043.043 0 0 0-.03.012c-.062.063.037.296.221.517.472.57.6.501.216-.114-.155-.249-.325-.419-.407-.415z"></path><path fill="#2f99a1" d="M12.093.009C9.408 0 9.198.039 8.587.65c-.62.62-.65.797-.65 3.969v3.319H4.619c-3.171 0-3.348.029-3.968.65-.608.607-.65.83-.65 3.44 0 1.683.105 2.79.265 2.79.145 0 .264.237.264.528 0 .353.177.53.53.53.29 0 .529.119.529.264 0 .162 1.234.265 3.175.265h3.175v3.316c0 3.075.043 3.364.595 3.953.552.59.796.637 3.32.652 2.55.015 2.765-.025 3.373-.633.62-.62.65-.798.65-3.97v-3.318h3.174c1.94 0 3.175-.103 3.175-.265 0-.145.19-.265.422-.265.232 0 .484-.238.56-.529.076-.29.244-.529.372-.529.129 0 .234-1.255.234-2.79 0-2.61-.042-2.832-.65-3.44-.62-.62-.796-.649-3.98-.649H15.85l.053-3.579c.067-4.471.184-4.338-3.811-4.35zm-.114.52c2.033 0 2.26.055 2.79.664.527.606.577.952.577 3.969v3.305h3.32c3.171 0 3.348.03 3.968.65.575.574.65.879.65 2.646 0 1.737-.062 1.996-.471 1.996-.26 0-.643.238-.852.529-.348.482-.685.53-3.763.53h-3.381v3.318c0 3.172-.029 3.349-.65 3.97-.356.356-.833.649-1.058.649-.224 0-.409.119-.409.264 0 .148-.673.258-1.521.249-1.253-.014-1.627-.129-2.117-.652-.552-.59-.595-.878-.595-3.953v-3.317h-3.32c-3.17 0-3.348-.029-3.968-.65-.583-.582-.65-.87-.65-2.79s.067-2.207.65-2.79c.62-.62.797-.649 3.969-.649h3.319V5.148c0-3.171.029-3.348.65-3.969.585-.586.865-.65 2.862-.65zm-.044 2.117c-.286 0-.788.7-1.425 1.989-.542 1.094-.985 2.046-.985 2.116 0 .07 1.072.129 2.381.129 1.31 0 2.382-.048 2.382-.105 0-.058-.43-1.01-.956-2.117-.627-1.321-1.107-2.012-1.397-2.012zm-5.138 6.88c-.046 0-.727.31-1.513.69-.787.379-1.702.793-2.034.92-1.142.433-.72 1.126 1.314 2.153 1.055.532 2.008.974 2.117.983.109.01.198-1.056.198-2.365 0-1.31-.037-2.382-.082-2.382zm5.103 0c-1.12 0-1.536.25-2.068 1.244-.376.702-.384.872-.042.872.145 0 .264-.14.264-.31 0-.17.193-.523.429-.783.41-.454.468-.453 1.415.03.567.29 1.165.874 1.408 1.375.386.797.386.91 0 1.338-.233.256-.583.467-.779.467-.196 0-.356.119-.356.264 0 .346.15.334.858-.066.932-.525 1.241-1.052 1.25-2.128.012-1.409-.912-2.304-2.38-2.304zm5.162 0c-.07 0-.129 1.071-.129 2.38 0 1.31.058 2.382.129 2.382.07 0 1.023-.443 2.116-.984 1.206-.597 1.989-1.147 1.989-1.397s-.783-.8-1.989-1.398c-1.093-.54-2.046-.984-2.116-.984zm-5.156 7.408c-1.31 0-2.38.058-2.38.128s.444 1.026.987 2.124c.657 1.328 1.122 1.971 1.39 1.922.346-.064 2.353-3.421 2.376-3.976.005-.109-1.063-.198-2.373-.198z"></path><path fill="#96266c" d="M12.093.009C9.408 0 9.198.039 8.587.65c-.62.62-.65.797-.65 3.969v3.319H4.619c-3.171 0-3.348.029-3.968.65-.608.607-.65.83-.65 3.44 0 1.683.105 2.79.265 2.79.145 0 .264.237.264.528 0 .353.177.53.53.53.29 0 .529.119.529.264 0 .162 1.234.265 3.175.265h3.175v3.316c0 3.075.043 3.364.595 3.953.552.59.796.637 3.32.652 2.55.015 2.765-.025 3.373-.633.62-.62.65-.798.65-3.97v-3.318h3.174c1.94 0 3.175-.103 3.175-.265 0-.145.19-.265.422-.265.232 0 .484-.238.56-.529.076-.29.244-.529.372-.529.129 0 .234-1.255.234-2.79 0-2.61-.042-2.832-.65-3.44-.62-.62-.796-.649-3.98-.649H15.85l.053-3.579c.067-4.471.184-4.338-3.811-4.35zm-.114.52c2.033 0 2.26.055 2.79.664.527.606.577.952.577 3.969v3.305h3.32c3.171 0 3.348.03 3.968.65.583.582.65.87.65 2.79s-.067 2.207-.65 2.79c-.62.62-.797.65-3.968.65h-3.32v3.318c0 3.172-.029 3.349-.65 3.97-.588.588-.854.647-2.843.633-1.965-.015-2.258-.083-2.79-.652-.553-.59-.596-.878-.596-3.953v-3.317h-3.32c-3.17 0-3.348-.029-3.968-.65-.583-.582-.65-.87-.65-2.79s.067-2.207.65-2.79c.62-.62.797-.649 3.969-.649h3.319V5.148c0-3.171.029-3.348.65-3.969.585-.586.865-.65 2.862-.65zm-.044 2.117c-.286 0-.788.7-1.425 1.989-.542 1.094-.985 2.046-.985 2.116 0 .07 1.072.129 2.381.129 1.31 0 2.382-.048 2.382-.105 0-.058-.43-1.01-.956-2.117-.627-1.321-1.107-2.012-1.397-2.012zm-5.138 6.88c-.046 0-.727.31-1.513.69-.787.379-1.702.793-2.034.92-1.142.433-.72 1.126 1.314 2.153 1.055.532 2.008.974 2.117.983.109.01.198-1.056.198-2.365 0-1.31-.037-2.382-.082-2.382zm5.103 0c-1.12 0-1.536.25-2.068 1.244-.376.702-.384.872-.042.872.145 0 .264-.14.264-.31 0-.17.193-.523.429-.783.41-.454.468-.453 1.415.03.567.29 1.165.874 1.408 1.375.386.797.386.91 0 1.338-.233.256-.583.467-.779.467-.196 0-.356.119-.356.264 0 .346.15.334.858-.066.932-.525 1.241-1.052 1.25-2.128.012-1.409-.912-2.304-2.38-2.304zm5.162 0c-.07 0-.129 1.071-.129 2.38 0 1.31.058 2.382.129 2.382.07 0 1.023-.443 2.116-.984 1.206-.597 1.989-1.147 1.989-1.397s-.783-.8-1.989-1.398c-1.093-.54-2.046-.984-2.116-.984zm-5.156 7.408c-1.31 0-2.38.058-2.38.128s.444 1.026.987 2.124c.657 1.328 1.122 1.971 1.39 1.922.346-.064 2.353-3.421 2.376-3.976.005-.109-1.063-.198-2.373-.198z"></path><path fill="#5b3b6a" d="M12.093.009C9.408 0 9.198.039 8.587.65c-.62.62-.65.797-.65 3.969v3.319H4.619c-3.171 0-3.348.029-3.968.65-.608.607-.65.83-.65 3.44 0 1.683.105 2.79.265 2.79.145 0 .264.237.264.528 0 .353.177.53.53.53.29 0 .529.119.529.264 0 .162 1.234.265 3.175.265h3.175v3.316c0 3.075.043 3.364.595 3.953.552.59.796.637 3.32.652 2.55.015 2.765-.025 3.373-.633.62-.62.65-.798.65-3.97v-3.318h3.174c1.94 0 3.175-.103 3.175-.265 0-.145.19-.265.422-.265.232 0 .484-.238.56-.529.076-.29.244-.529.372-.529.129 0 .234-1.255.234-2.79 0-2.61-.042-2.832-.65-3.44-.62-.62-.797-.649-3.968-.649h-3.32v-3.61c0-3.126-.062-3.655-.463-3.96-.317-.24-1.364-.353-3.319-.36zm-.112.52c1.973 0 2.277.067 2.79.613.528.562.575.887.575 3.969v3.356h3.394c3.205 0 3.425.034 3.968.612.495.527.575.919.575 2.79 0 1.96-.064 2.243-.649 2.828-.62.62-.797.65-3.968.65h-3.32v3.318c0 3.172-.029 3.349-.65 3.97-.585.585-.865.649-2.863.649-1.974 0-2.278-.067-2.79-.613-.529-.562-.576-.886-.576-3.968v-3.357H5.074c-3.205 0-3.426-.034-3.969-.612-.498-.53-.576-.917-.576-2.863 0-2.072.053-2.296.664-2.827.605-.527.951-.577 3.969-.577h3.305V5.148c0-3.171.029-3.348.65-3.969.585-.586.865-.65 2.864-.65zm-.046 2.117c-.286 0-.788.7-1.425 1.989-.542 1.094-.985 2.046-.985 2.116 0 .07 1.072.129 2.381.129 1.31 0 2.382-.048 2.382-.105 0-.058-.43-1.01-.956-2.117-.627-1.321-1.107-2.012-1.397-2.012zm-5.138 6.88c-.046 0-.727.31-1.513.69-.787.379-1.702.793-2.034.92-1.142.433-.72 1.126 1.314 2.153 1.055.532 2.008.974 2.117.983.109.009.198-1.056.198-2.365 0-1.31-.037-2.382-.082-2.382zm5.103 0c-1.12 0-1.536.25-2.068 1.244-.376.702-.384.872-.042.872.145 0 .264-.14.264-.31 0-.17.193-.523.429-.783.41-.454.468-.453 1.415.03.567.29 1.165.874 1.408 1.375.386.797.386.91 0 1.338-.233.256-.583.467-.779.467-.196 0-.356.119-.356.264 0 .346.15.334.858-.066.932-.525 1.241-1.052 1.25-2.128.012-1.409-.912-2.304-2.38-2.304zm5.162 0c-.07 0-.129 1.071-.129 2.38 0 1.31.058 2.382.129 2.382.07 0 1.023-.443 2.116-.984 1.206-.597 1.989-1.147 1.989-1.397s-.783-.8-1.989-1.398c-1.093-.54-2.046-.984-2.116-.984zm-5.156 7.408c-1.31 0-2.38.057-2.38.127s.444 1.027.987 2.125c.657 1.328 1.122 1.971 1.39 1.922.346-.064 2.353-3.421 2.376-3.976.005-.109-1.063-.198-2.373-.198z"></path><path d="M9.763 0c-.295.002-.765.24-1.176.65-.357.357-.65.714-.65.794 0 .323.437.111.794-.385.21-.291.594-.53.853-.53.258 0 .47-.118.47-.264 0-.182-.114-.265-.29-.265zm4.286 0c-.177 0-.29.083-.29.265 0 .146.187.265.415.265 1.002 0 1.172.63 1.172 4.346 0 2.218.101 3.591.265 3.591.163 0 .264-1.37.264-3.584 0-3.452-.023-3.607-.649-4.233-.41-.41-.882-.648-1.177-.65zM4.883 7.938c-3.452 0-3.608.024-4.233.65C.293 8.945 0 9.42 0 9.646c0 .225.12.409.265.409.145 0 .264-.188.264-.416 0-1.002.632-1.172 4.347-1.172 2.218 0 3.59-.101 3.59-.264 0-.164-1.37-.265-3.583-.265zm18.04.612a.168.168 0 0 0-.115.054c-.102.11-.037.253.145.318s.33.347.33.626.12.507.265.507c.146 0 .265-.188.265-.416 0-.459-.579-1.112-.89-1.089zM.265 13.76c-.485 0-.273.81.385 1.467.62.62.797.65 3.968.65h3.32v3.58c0 3.35.038 3.623.595 4.218.552.59.796.637 3.32.652 2.55.015 2.765-.025 3.373-.633.626-.626.65-.781.65-4.234v-3.584h3.391c3.291 0 3.41-.02 3.969-.663.603-.693.766-1.453.312-1.453-.145 0-.265.187-.265.416 0 1.001-.63 1.171-4.346 1.171h-3.591v3.591c0 3.716-.17 4.347-1.172 4.347-.228 0-.416.119-.416.264 0 .152-.793.265-1.852.265-1.058 0-1.852-.113-1.852-.265 0-.145-.186-.264-.415-.264-1.002 0-1.172-.631-1.172-4.347v-3.59h-3.59c-3.716 0-4.348-.17-4.348-1.172 0-.229-.119-.416-.264-.416z"></path></svg><rect className="controller-button-overlay" x="7.937666666666666" y="0" rx="1" ry="1" fill="black" fillOpacity="0" width="7.937666666666666px" height="7.937666666666666px"></rect><rect className="controller-button-overlay" x="15.875333333333332" y="7.937666666666666" rx="1" ry="1" fill="black" fillOpacity="0" width="7.937666666666666px" height="7.937666666666666px"></rect><rect className="controller-button-overlay" x="7.937666666666666" y="15.875333333333332" rx="1" ry="1" fill="black" fillOpacity="0" width="7.937666666666666px" height="7.937666666666666px"></rect><rect className="controller-button-overlay" x="0" y="7.937666666666666" rx="1" ry="1" fill="black" fillOpacity="0" width="7.937666666666666px" height="7.937666666666666px"></rect></g></svg>;
        const abButtons = <svg height="127.2" width="127.2" style={{ transform: `scale(${scale})`, transformOrigin: `0 0`, position: 'absolute', left: this.scalePixel(240.8), top: this.scalePixel(297.85) }}visibility="visible"><g transform="translate(17.15858198888469 17.15858198888469) scale(3.4317163977769383)"><g transform="translate(13.533000000000001 2.2554999999999996)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.533 13.246" width="13.533" height="13.246"><path fill="#ff8135" stroke="#5c406c" strokeLinecap="round" strokeLinejoin="round" strokeWidth=".861" d="M13.099 6.602c.1 2.457-1.61 4.712-3.813 5.662a6.152 6.152 0 0 1-4.661.175C1.38 11.444-.431 7.43.85 4.317c.68-1.583 1.982-2.925 3.63-3.485 2.494-.914 5.612-.248 7.246 1.923a6.112 6.112 0 0 1 1.372 3.847z"></path><path fill="#e5cdc4" fillRule="evenodd" stroke="#e5cdc4" strokeWidth=".265" d="M2.454 2.619C.284 4.916 1.146 7.611 1.146 7.611c.792-4.598 3.68-6.217 8.39-6.006 0 0-4.269-1.965-7.082 1.014z"></path><path fill="#af4282" d="M8.745 9.825h1.423l-1.72-6.914H7.027L2.542 9.825h1.412c.444-.507.61-1.53 1.45-1.304H8.42l.326 1.304zm-.602-2.519H5.574c.621-.807 1.397-2.523 1.92-2.76l.649 2.76z" fontFamily="Nexa Bold" fontSize="15.875" fontWeight="400" letterSpacing="0" style={{ lineHeight: '125%' }} wordSpacing="0"></path></svg><circle className="controller-button-overlay" cx="6.766500000000001" cy="6.766500000000001" r="6.766500000000001" fill="black" fillOpacity="0"></circle></g><g transform="translate(0 13.533000000000001)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.533 13.246" width="13.533" height="13.246"><path fill="#ff91c4" stroke="#5c406c" strokeLinecap="round" strokeLinejoin="round" strokeWidth=".861" d="M13.099 6.602c.1 2.457-1.61 4.712-3.813 5.662a6.152 6.152 0 0 1-4.661.175C1.38 11.444-.431 7.43.85 4.317c.68-1.583 1.982-2.925 3.63-3.485 2.494-.914 5.612-.248 7.246 1.923a6.112 6.112 0 0 1 1.372 3.847z"></path><path fill="#e5cdc4" fillRule="evenodd" stroke="#e5cdc4" strokeWidth=".265" d="M2.454 2.619C.284 4.916 1.051 7.563 1.051 7.563c.793-4.597 3.823-6.169 8.533-5.958 0 0-4.317-1.965-7.13 1.014z"></path><path fill="#af4282" d="M5.337 7.226c.909.088 1.876-.201 2.736.21.288.113.37.493.32.773-.143.515-.716.742-1.197.817-.607-.047-1.91.169-2.181-.227-.058-.371.217-.697.222-1.073l.1-.5zM5.88 4.49c.81.122 1.664-.209 2.444.123.263.119.537.35.451.67-.591 1.227-2.213.797-3.21.797l.315-1.59zm2.233-1.186h-3.28L3.45 10.22c1.523-.054 3.064.132 4.572-.152 1.117-.305 1.976-1.536 1.666-2.692-.146-.282-.515-.448-.562-.79.088-.354.606-.278.717-.652.452-.693.41-1.769-.288-2.287-.42-.274-.95-.333-1.442-.342z" fontFamily="Nexa Bold" fontSize="15.875" fontWeight="400" letterSpacing="0" style={{ lineHeight: '125%' }} wordSpacing="0"></path></svg><circle className="controller-button-overlay" cx="6.766500000000001" cy="6.766500000000001" r="6.766500000000001" fill="black" fillOpacity="0"></circle></g></g></svg>;
        const resetButton = <svg visibility="visible" width="70px" height="26.25px" style={{ transform: `scale(${scale})`, transformOrigin: `0 0`, position: 'absolute', left: this.scalePixel(105.25), top: this.scalePixel(284) }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.937 6.35"><path d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.833.65 1.058.65.225 0 .806-.072.806.073 0 .17 1.912.36 5.969.36s6.334 0 6.334-.169c0-.145.184-.264.41-.264.224 0 .7-.293 1.057-.65.548-.547.65-.902.65-2.26 0-1.359-.102-1.714-.65-2.261l-.65-.65H8.472z" fill="#f290c1"></path><path d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.833.65 1.058.65.225 0 .806.008.806.153 0 .17 1.418-.021 5.376-.021 3.85 0 6.693.297 6.795.132.09-.145.34-.264.557-.264.216 0 .685-.293 1.042-.65.548-.547.65-.902.65-2.26 0-1.359-.102-1.714-.65-2.261l-.65-.65H8.472zm13.915.983l.595.366c.385.237.595.623.595 1.096 0 .401-.06.73-.132.73-.135 0-.187-.708-.066-.898.036-.058-.172-.372-.463-.7zM.898 3.543c.097.003.164.108.164.278 0 .465-.158.533-.385.166-.084-.136-.031-.321.117-.413a.188.188 0 0 1 .104-.032zm.6.502c.039-.013.065.073.073.254.011.255.11.45.22.432.108-.017 2.103-.009 4.43.019 2.704.031 4.043.134 3.705.283-.291.128-2.22.227-4.288.22-3.826-.013-4.575-.204-4.225-1.077.033-.08.061-.123.085-.131z" fill="#f291bd"></path><path d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.833.65 1.058.65.225 0 1.076.04 1.076.185 0 .17 1.807.09 5.765.09 3.85 0 6.034.154 6.136-.011.09-.145.34-.264.557-.264.216 0 .685-.293 1.042-.65.548-.547.65-.902.65-2.26 0-1.359-.102-1.714-.65-2.261l-.65-.65H8.472zm1.1.53H15.11l.65.649c.639.64.9 1.996.384 1.996-.146 0-.265-.178-.265-.395 0-.217-.26-.693-.577-1.058l-.576-.664H8.873c-6.265 0-6.941.117-7.496 1.293-.44.931-.4 1.181.298 1.836.575.54.865.575 4.762.575 2.59 0 4.15.1 4.15.265 0 .167-1.642.259-4.431.249-4.328-.016-4.446-.032-5.027-.653-.924-.986-.797-3.218.34-4.26z" fill="#a3809c"></path><path d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.826.65 1.043.65.216 0 .386.232.542.241.535.03.73.005 1.13-.049.4-.055 3.114.04 6.344-.023l5.872-.115.676-.677c.577-.577.676-.912.676-2.288 0-1.358-.101-1.713-.649-2.26l-.65-.65H8.472zm.766.53h13.04l.65.649c.742.742.92 2.157.239 1.895-.234-.09-.342-.045-.25.102.088.143-.139.558-.504.923-.591.591-.881.663-2.66.663-1.154 0-1.997.112-1.997.265 0 .167-1.642.259-4.431.249-4.328-.016-4.446-.032-5.027-.653-.863-.92-.714-3.018.251-4.05zm12.487.528c-.013.014.067.121.231.331.2.255.408.463.463.463.218 0 .078-.217-.363-.563-.21-.164-.317-.244-.33-.23zM1.184 3.44c-.117 0 .066.297.408.661.341.364.714.661.827.661.113 0 .39.053.054-.311-.337-.364-1.171-1.011-1.289-1.011zM6.09 4.528c-.6 0-1.2.013-1.654.039-.91.051-.165.094 1.654.094s2.563-.043 1.653-.094a31.07 31.07 0 0 0-1.653-.04z" fill="#a8769a"></path><path d="M1.303 0l-.65.65c-.546.547-.649.902-.649 2.258 0 1.303.113 1.73.595 2.245l.596.635 7.144.008 7.143.008.728-.64c.644-.567.727-.826.727-2.253 0-1.359-.101-1.714-.649-2.261l-.65-.65H8.472zm.53.53H15.11l.65.649c.885.886.815 1.583-.269 2.666-.884.884-.703.965-2.624.965-1.153 0-2.28.064-2.28.217 0 .167-1.642.259-4.431.249-4.328-.016-4.446-.032-5.027-.653-.845-.902-.819-2.572.054-3.444z" fill="#2f99a1"></path><path d="M1.303 0l-.65.65c-.546.547-.649.902-.649 2.258 0 1.303.113 1.73.595 2.245l.596.635 7.144.008 7.016.103.855-.735c.644-.567.727-.826.727-2.253 0-1.359-.101-1.714-.649-2.261l-.65-.65H8.472zm.53.53H15.11l.65.649c.477.478.648.935.648 1.731 0 .797-.17 1.254-.649 1.732l-.65.65-6.692-.016-6.693-.017-.595-.635c-.845-.904-.755-2.749.118-3.62z" fill="#5b3b6a"></path><path d="M16.673 1.587c-.12-.084-.265.542-.265 1.203 0 .924-.15 1.353-.649 1.852l-.65.65-13.228-.19-.698-.46c-.356-.357-.506-.943-.506-1.17 0-.224-.262-.297-.407-.297-.533 0-.005 1.371.833 2.25l.622.359 6.69.019 6.689.018.917-.917c.777-.777.917-1.101.917-2.117 0-.66-.034-1.037-.153-1.12z"></path><text style={{ lineHeight: '1.25' }} x="2.765" y="2.203" fontWeight="400" fontSize="5.333" fontFamily="sans-serif" letterSpacing="0" wordSpacing="0"></text><g aria-label="reset" style={{ lineHeight: 1.25 }} fontWeight="400" fontSize="4.667" fontFamily="Arial Rounded MT Bold" letterSpacing="0" wordSpacing="0" fill="#5b3b6a"><path d="M3.417 3.587v.52c0 .125-.03.22-.088.284a.298.298 0 0 1-.226.093.285.285 0 0 1-.221-.095c-.058-.064-.087-.158-.087-.283V2.374c0-.28.101-.419.303-.419.104 0 .178.033.224.098a.54.54 0 0 1 .075.29c.074-.128.15-.225.228-.29a.478.478 0 0 1 .314-.098c.13 0 .258.033.38.098.124.065.185.152.185.26a.249.249 0 0 1-.08.19.242.242 0 0 1-.168.072.815.815 0 0 1-.166-.041.74.74 0 0 0-.23-.043.335.335 0 0 0-.224.073c-.058.047-.055.165-.087.26-.032.093-.101.158-.113.289-.013.129-.019.287-.019.474zM6.464 3.372H5.247c.002.142.03.266.084.374.057.108.13.19.221.244a.59.59 0 0 0 .306.082c.074 0 .094-.04.155-.057.062-.018.138-.093.196-.13.058-.037.11-.046.16-.088.048-.043.143-.053.22-.126a.204.204 0 0 1 .137-.041c.064 0 .115.017.155.052.04.035.06.085.06.149a.41.41 0 0 1-.067.198.798.798 0 0 1-.2.216c-.089.069-.2.126-.335.171a1.432 1.432 0 0 1-.463.068c-.4 0-.758-.05-.98-.278-.221-.228-.285-.6-.285-.99 0-.185.028-.355.082-.511.055-.158.135-.293.24-.406.105-.112.234-.198.387-.257.153-.061.324-.091.51-.091.244 0 .452.051.625.155.175.101.305.234.392.396.086.163.13.328.13.497 0 .156-.045.258-.135.305a.85.85 0 0 1-.378.068zM5.247 3.02l1.049-.016c-.016-.212.006-.355-.094-.46a.51.51 0 0 0-.392-.16.5.5 0 0 0-.383.162c-.099.107-.159.265-.18.474zM9.506 3.671a.768.768 0 0 1-.125.442.776.776 0 0 1-.372.278c-.162.062-.36.093-.595.093-.223 0-.414-.034-.574-.102a.841.841 0 0 1-.353-.255.521.521 0 0 1-.114-.31.25.25 0 0 1 .257-.248c.066 0 .116.015.151.047a.524.524 0 0 1 .1.135c.064.11.076.146.165.2.266-.033.433.05.587.05.124 0 .067.053.146-.002.08-.056.12-.12.12-.191 0-.11-.041-.19-.125-.24a1.515 1.515 0 0 0-.407-.143 3.538 3.538 0 0 1-.524-.166.873.873 0 0 1-.322-.233.53.53 0 0 1-.12-.353c0-.125.037-.242.111-.353a.76.76 0 0 1 .328-.265c.146-.066.322-.1.527-.1.16 0 .305.017.433.05.129.034.236.079.32.135a.645.645 0 0 1 .197.187.361.361 0 0 1 .068.2.23.23 0 0 1-.073.176c-.047.045-.114.068-.203.068a.254.254 0 0 1-.164-.055 1.116 1.116 0 0 1-.152-.164.562.562 0 0 0-.167-.146.524.524 0 0 0-.26-.054.503.503 0 0 0-.28.073c-.074.047-.111.106-.111.177 0 .066.027.12.082.162.054.041.192.06.284.087.093.027.157.076.32.116.192.047.35.103.471.169a.767.767 0 0 1 .278.232c.064.088.096.19.096.303zM11.773 3.372l-1.121.064c.001.141-.066.202-.011.31.056.108.13.19.22.244a.59.59 0 0 0 .306.082.764.764 0 0 0 .203-.025.71.71 0 0 0 .18-.082c.058-.038.11-.078.16-.12l.189-.174a.204.204 0 0 1 .136-.041c.064 0 .116.017.155.052.04.035.06.085.06.149a.41.41 0 0 1-.067.198.797.797 0 0 1-.2.216c-.088.069-.2.126-.335.171a1.432 1.432 0 0 1-.463.068c-.4 0-.71-.113-.932-.341-.221-.228-.332-.537-.332-.928 0-.184.027-.354.082-.51.054-.158.134-.293.239-.406.105-.112.234-.198.387-.257.154-.061.324-.091.51-.091.244 0 .452.051.625.155.175.101.305.234.392.396.087.163.13.328.13.497 0 .156-.045.258-.135.305a.85.85 0 0 1-.378.068zm-1.217-.353h1.128c-.015-.212-.073-.371-.173-.476-.099-.106-.182-.064-.344-.064-.155 0-.267.006-.367.114-.099.106-.222.217-.244.426zM12.842 2.01h.068v-.374c0-.1.003-.178.007-.235a.362.362 0 0 1 .046-.148.272.272 0 0 1 .104-.102.307.307 0 0 1 .367.048c.043.04.07.088.08.145.012.057-.006.36.002.464l.016.202h.228c.088 0 .155.021.2.064.048.04.071.094.071.16 0 .083-.033.141-.1.175-.065.033-.208-.048-.283.05l-.108.143c-.082.381 0 .762 0 1.144 0 .097-.005.03.001.082a.245.245 0 0 0 .055.128c.03.032.08.048.146.048a.82.82 0 0 0 .148-.019.729.729 0 0 1 .146-.02c.05 0 .095.02.134.061.041.04.062.09.062.149 0 .1-.055.177-.164.23-.11.053-.267.08-.472.08-.194 0-.342-.033-.442-.099a.46.46 0 0 1-.198-.27c-.03-.116-.101-.27-.093-.463.015-.398-.12-.343.047-1.194h-.082c-.09 0-.158-.022-.205-.064a.209.209 0 0 1-.07-.162c0-.065.024-.118.072-.16a.326.326 0 0 1 .217-.063z" ></path></g></svg><rect className="controller-button-overlay" width="100%" height="100%" fill="black" fillOpacity="0" rx="10" ry="10"></rect></svg>
        const menuButton = <svg visibility="visible" width="70px" height="26.25px" style={{ transform: `scale(${scale})`, transformOrigin: `0 0`, position: 'absolute', left: this.scalePixel(192.75), top: this.scalePixel(284) }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.937 6.35"><path fill="#f290c1" d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.833.65 1.058.65.225 0 .409.119.409.264 0 .17 2.293.265 6.35.265 4.057 0 6.35-.096 6.35-.265 0-.145.184-.264.41-.264.224 0 .7-.293 1.057-.65.548-.547.65-.902.65-2.26 0-1.359-.102-1.714-.65-2.261l-.65-.65H8.472z"></path><path fill="#f291bd" d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.833.65 1.058.65.225 0 .409.119.409.264 0 .17 2.244.265 6.202.265 3.85 0 6.264-.1 6.366-.265.09-.145.34-.264.557-.264.216 0 .685-.293 1.042-.65.548-.547.65-.902.65-2.26 0-1.359-.102-1.714-.65-2.261l-.65-.65H8.472zm13.915.983l.595.366c.385.237.595.623.595 1.096 0 .401-.06.73-.132.73-.135 0-.187-.708-.066-.898.036-.058-.172-.372-.463-.7zM.898 3.543c.097.003.164.108.164.278 0 .465-.158.533-.385.166-.084-.136-.031-.321.117-.413a.188.188 0 0 1 .104-.032zm.6.502c.039-.013.065.073.073.254.011.255.11.45.22.432.108-.017 2.103-.009 4.43.019 2.704.031 4.043.134 3.705.283-.291.128-2.22.227-4.288.22-3.826-.013-4.575-.204-4.225-1.077.033-.08.061-.123.085-.131z"></path><path fill="#a3809c" d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.833.65 1.058.65.225 0 .409.119.409.264 0 .17 2.244.265 6.202.265 3.85 0 6.264-.1 6.366-.265.09-.145.34-.264.557-.264.216 0 .685-.293 1.042-.65.548-.547.65-.902.65-2.26 0-1.359-.102-1.714-.65-2.261l-.65-.65H8.472zm1.1.53H15.11l.65.649c.639.64.9 1.996.384 1.996-.146 0-.265-.178-.265-.395 0-.217-.26-.693-.577-1.058l-.576-.664H8.873c-6.265 0-6.941.117-7.496 1.293-.44.931-.4 1.181.298 1.836.575.54.865.575 4.762.575 2.59 0 4.15.1 4.15.265 0 .167-1.642.259-4.431.249-4.328-.016-4.446-.032-5.027-.653-.924-.986-.797-2.193.34-3.236z"></path><path fill="#a8769a" d="M1.303 0l-.65.65c-.547.547-.649.902-.649 2.26 0 1.359.102 1.714.65 2.261.357.357.826.65 1.043.65.216 0 .46.108.542.241.082.133.476.196.876.142.4-.055 3.368-.151 6.598-.214l5.872-.115.676-.677c.577-.577.676-.912.676-2.288 0-1.358-.101-1.713-.649-2.26l-.65-.65H8.472zm.766.53h13.04l.65.649c.742.742.92 2.157.239 1.895-.234-.09-.342-.045-.25.102.088.143-.139.558-.504.923-.591.591-.881.663-2.66.663-1.154 0-1.997.112-1.997.265 0 .167-1.642.259-4.431.249-4.328-.016-4.446-.032-5.027-.653-.863-.92-.793-2.239.172-3.272zm12.487.528c-.013.014.067.121.231.331.2.255.408.463.463.463.218 0 .078-.217-.363-.563-.21-.164-.317-.244-.33-.23zM1.184 3.44c-.117 0 .066.297.408.661.341.364.714.661.827.661.113 0-.07-.297-.407-.661-.337-.364-.71-.661-.828-.661zM6.09 4.528c-.6 0-1.2.013-1.654.039-.91.051-.165.094 1.654.094s2.563-.043 1.653-.094a31.07 31.07 0 0 0-1.653-.04z"></path><path fill="#2f99a1" d="M1.303 0l-.65.65c-.546.547-.649.902-.649 2.258 0 1.303.113 1.73.595 2.245l.596.635 7.144.008 7.143.008.728-.64c.644-.567.727-.826.727-2.253 0-1.359-.101-1.714-.649-2.261l-.65-.65H8.472zm.53.53H15.11l.65.649c.885.886.815 1.583-.269 2.666-.884.884-.989.917-2.91.917-1.153 0-1.994.112-1.994.265 0 .167-1.642.259-4.431.249-4.328-.016-4.446-.032-5.027-.653-.845-.902-.819-2.572.054-3.444z"></path><path fill="#5b3b6a" d="M1.303 0l-.65.65c-.546.547-.649.902-.649 2.258 0 1.303.113 1.73.595 2.245l.596.635 7.144.008 7.143.008.728-.64c.644-.567.727-.826.727-2.253 0-1.359-.101-1.714-.649-2.261l-.65-.65H8.472zm.53.53H15.11l.65.649c.477.478.648.935.648 1.731 0 .797-.17 1.254-.649 1.732l-.65.65-6.692-.016-6.693-.017-.595-.635C.284 3.72.31 2.05 1.183 1.179z"></path><path d="M16.673 1.587c-.146 0-.265.542-.265 1.203 0 .924-.15 1.353-.649 1.852l-.65.65H1.833l-.65-.65C.827 4.285.534 3.81.534 3.584c0-.225-.119-.409-.264-.409-.533 0-.243.831.595 1.709l.86.9 6.69.019 6.689.018.917-.917c.777-.777.917-1.101.917-2.117 0-.66-.119-1.2-.264-1.2z"></path><path fill="#5b3b6a" d="M3.773 1.723c-.1.007-.2.056-.304.175-.243.263-.34-.344-.645-.087-.219.159-.07.434-.108.658v1.597h.56c.051-.533-.12-1.11.123-1.61.36-.45 1.038.15.82.609.04.378-.212 1.192.456 1.001h.105c.056-.535-.13-1.11.133-1.612.335-.39.855.064.83.478.034.347-.282.99.169 1.135.545.15.278-.472.348-.78-.008-.428.044-.943-.287-1.27-.348-.327-.983-.361-1.302.025-.313.015-.599-.34-.898-.319zm4.12.001c-.599.022-1.183.496-1.174 1.125-.051.62.434 1.27 1.082 1.27.367.008.959.003 1.073-.427-.266-.54-.722.142-1.15-.112-.45-.06-.384-.634.083-.451.419.035.842-.01 1.263.007.127-.605-.26-1.348-.923-1.392a1.13 1.13 0 0 0-.255-.02zm1.927.028c-.04-.012-.09-.002-.154.047-.34.104-.115.567-.174.837v1.431h.555c.06-.543-.157-1.163.19-1.642.384-.399 1.11.097.933.6.106.316-.215.898.167 1.042h.393c-.056-.651.16-1.385-.237-1.963-.328-.396-1.002-.468-1.362-.076-.147.001-.19-.238-.311-.276zm2.315.054c.05.645-.141 1.359.213 1.944.299.387.96.513 1.314.132.25-.084.356.443.641.157.17-.234.03-.55.07-.826V1.806h-.555c-.06.543.156 1.163-.19 1.642-.385.398-1.11-.097-.933-.601-.106-.318.256-1.05-.27-1.041h-.29zm-4.228.424c.268-.015.542.11.618.389-.382.126-.79.025-1.183.054h-.028c.06-.275.324-.429.593-.443z" fontFamily="Nexa Bold" fontSize="15.875" fontWeight="400" letterSpacing="0" style={{ lineHeight: '125%' }} wordSpacing="0"></path></svg><rect className="controller-button-overlay" width="100%" height="100%" fill="black" fillOpacity="0" rx="10" ry="10"></rect></svg>


        return (
            <div
                className='simulator-display'
                id="wrap"
                style={{
                    transform: `scale(${scale})`,
                    transformOrigin: `0 0`,
                    width: this.scalePixel(368),
                    height: this.scalePixel(432.938),
                }}
            >
                <div className='debug-stats' id="debug-stats"></div>
                <div className='screen-back' id="screen-back"></div>
                <div id="screen">
                    <div
                        id="paint-surface-container"
                        style={{
                            top: this.scalePixel(12),
                            left: this.scalePixel(12),
                        }}
                    >
                        <canvas
                            id="paint-surface"
                            width="160"
                            height="120"
                            className="borders"
                            style={{
                                transform: `scale(${scale})`,
                                transformOrigin: `0 0`,
                                height: 229,
                                width: 312,
                                left: this.scalePixel(28),
                                top: this.scalePixel(20),
                                // Pre-computed polygon from simulator display css
                                clipPath: `polygon(0px 5.33333px, 5.33333px 0px, 338.667px/1.2) 0px, 344px 5.33333px, 344px 256.667px, 338.667px 262px, 5.33333px 262px, 0px 256.667px)`,
                            }}
                        />
                    </div>
                    <div id="controls" className="no-focus">
                        {dPad}
                        {abButtons}
                        {resetButton}
                        {menuButton}
                    </div>
                    {children}
                </div>
                <div id="instructions"></div>
            </div>
        );
    }
}
